<template>
  <div class="classify-box">
      <div class="classify-top">
        <router-link to="/">
        <img src="@/assets/img/back.png" />
      </router-link>
      <span>图书分类</span>
      </div>
      <search2></search2>
    <div class="classify-bottom">
      <Recommend type="tuijian" class="c1" />
      <Recommend type="shujia" class="c2"/>
      <Recommend type="jiaocai" class="c3"/>
      <Recommend type="shoufa" class="c4"/>
<van-loading class="loading" type="spinner" color="#1989fa" v-if="isShow"></van-loading>
    </div>
    <van-loading class="loading" type="spinner" color="#1989fa" v-if="isShow"></van-loading>
  </div>
</template>
<script>
import Search2 from './Search2.vue';
import store from "../store/index"
import Recommend from './Recommend.vue';
export default {
  components: { Search2,Recommend },
  name: "Classify",
  computed:{
      isShow:function(){
        return this.$store.state.isLoading
      }
    },
  data() {
    return {};
  },
};
</script>
<style>
.classify-box {
  height: 100%;
  background-color: #fff;
}
.classify-box .classify-top{
  background-color: #fff;
    position: sticky;
    top: 0;
    left: 0;
    height: .5rem;
    line-height: .5rem;
    font-size: 26px;
    font-weight: 700;
}
.classify-top img{
    float: left;
    width: .3rem;
    height: .3rem;
    margin: .1rem .1rem 0 .1rem;
}
.classify-top span{
    float: left;
}
/* .classify-bottom{ */
    /* calc(100% + xxxrem); +号左右两侧需要加空格，否则不会生效*/
    /* height: calc(100% - 1.3rem); */
    /* background-color: rgb(120, 152, 212); */
/* } */
.c1{
  color: rgb(240, 162, 73);
}
.c2{
  color: red;
}
.c3{
  color: blue;
}
.c4{
  color: green;
}
</style>